<br/>
<% 
	def user = session.user
	if(user.timeZone == null) {
		user.timeZone = 'Chennai'
	}
%>
<div id="tabs">
<ul>
	<li><a href="#account">Account</a></li>
	<li><a href="#password">Password</a></li>
	<li><a href="#settings">Settings</a></li>
</ul>
<div id="account">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">	
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td width="12%">
		<b>User Id</b>
	</td>
	<td>
		${user.id} 
    </td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td>
		<b>Name *</b>
	</td>
	<td>
		<input type="text" name="name" value="${user.name}" size="50" id="userName" />
	</td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td>
		<b>Email Id</b>
	</td>
	<td>
		${user.emailId}
	</td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td width="10%">
		<b>Time Zone *</b>
	</td>
	<td>
		<select name="timeZone]" id="timeZone">
		<%
			def timeZones = application.globalTimeZones
			timeZones.each { key, val ->
				if(key == user.timeZone) {
		%>
			<option value="${key}" selected="selected">${val}</option>
		<%		} else {	%>
			<option value="${key}">${val}</option>
		<%	
				}
			}
		%>	
		</select>
    </td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td width="10%">
		<b>Language</b>
	</td>
	<td>
		English 
    </td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td align="center">
		&nbsp;
	</td>
	<td>
		<input type="button" name="action" value="Update" onClick="wydProfileUpdateAccount()"/>
	</td>
</tr>	
</table>
</div>

<div id="password">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">	
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td width="20%">
		<b>Current Password *</b>
	</td>
	<td>
		<input type="password" name="currentPasswod" value="" size="30" id="currentPassword"/>
    </td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td>
		<b>New Password *</b>
	</td>
	<td>
		<input type="password" name="newPasswod" value="" size="30" id="newPassword"/>
    </td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td>
		<b>Retype New Password *</b>
	</td>
	<td>
		<input type="password" name="retypeNewPasswod" value="" size="30" id="retypeNewPassword"/>
    </td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
</tr>
<tr>
	<td align="center">
		&nbsp; 
	</td>
	<td>
		<input type="button" name="action" value="Update" onClick="wydProfileUpdatePassword()"/>
	</td>
</tr>	
</table>
</div>

<div id="settings">
</div>
	
</div>


<script type="text/javascript">
\$(document).ready(function() {
	\$("#tabs").tabs();
	
    \$('#retypeNewPassword').bind('keydown', function(e) {
    	var code = (e.keyCode ? e.keyCode : e.which);
    	 if(code == 13) {	wydProfileUpdatePassword();	}
    });
});

function wydProfileUpdateAccount() {
	var userName = \$('#userName').val();
	var timeZone = \$('#timeZone').val();
	\$.post('wydProfileUpdateAccount.groovy',
			{	
				userName     : userName, 
				timeZone : timeZone 
			},
			function(data) {
				showNotification({
                    message: data,
                    type: "success",
                    autoClose: true,
                    duration: 5
                });
				\$('#name').focus();
		 	}
		);
};

function wydProfileUpdatePassword() {
	var currentPassword = \$('#currentPassword').val();
	var newPassword = \$('#newPassword').val();
	var retypeNewPassword = \$('#retypeNewPassword').val();
	\$.post('wydProfileUpdatePassword.groovy',
			{	
				currentPassword   : currentPassword, 
				newPassword       : newPassword,
				retypeNewPassword : retypeNewPassword 
			},
			function(data) {
				showNotification({
                    message: data,
                    type: "success",
                    autoClose: true,
                    duration: 5
                });
				\$('#currentPassword').focus();
		 	}
		);
};
</script>
